// 头部组件
<template>
  <div class="todo-header">
      <!-- v-model=""绑定输入框的vaule值 @keyup.enter绑定按键回车键按下 -->
      <input type="text" placeholder="请输入你的任务名称，按回车确认" v-model="inputvalue" @keyup.enter="addli">
  </div>
</template>

<script>
// 在终端通过 npm i nanoid 下载nanoid库 引入
import {nanoid} from 'nanoid'
export default {
    name:'TodoHeader',
    data(){
        return{
            inputvalue:''
        }
    },
    methods: {
        addli(){
            // 判断输入的是否为空 并且去掉前后空格
            if(!this.inputvalue.trim()) return
            // 将用户输入的内容包装一个todoobj，到时候需要添加到li中
            const todoObj = {id:nanoid(),title:this.inputvalue,done:false}
            // this.addTodo(todoObj)   // 这是通过props进行数据传递
            this.$emit('addTodo',todoObj)   //这是通过自定义事件来传递数据
            // 添加完后将输入框变为空
            this.inputvalue=''
        }
    },
    // props:['addTodo']
}
</script>

<style scoped>
    .todo-header input{
        width:560px;
        height:28px;
        font-size: 14px;
        border: 1ox solid #ccc;
        border-radius: 4px;
        padding: 4px 7px;
    }
    .todo-header input:focus{
        outline:none;
        border-color: rgba(82,168,236,0.8);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.75),0 0 8px rgba(82,168,236,0.8);
    }
</style>